<template>
	<!-- 问题五 -->
	<a-modal title="物料计算" :width="1200" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
		:maskClosable="false" @ok="handleSubmit" @cancel="handleCancel">

		<a-spin :spinning="confirmLoading">
			<a-form :form="form">
				<a-row>

					<a-col :span="24" style="text-align: center; margin-bottom: 10px">
						<a-radio-group button-style="solid" v-model="materialType">
							<a-radio-button :value="$businessEnum.MATERIAL_TYPE_ENUM.material.id">
								原料
							</a-radio-button>
							<a-radio-button :value="$businessEnum.MATERIAL_TYPE_ENUM.customized.id">
								定制料
							</a-radio-button>
							<a-radio-button :value="$businessEnum.MATERIAL_TYPE_ENUM.cable.id">
								线缆
							</a-radio-button>
						</a-radio-group>
					</a-col>

					<a-col :span="24">
						<a-table ref="table" size="default" :columns="columns" :data-source="filteredData" :pagination="false"
							:rowKey="(record) => record.code">
							<!-- <span slot="image" slot-scope="text">
								<image-preview :images="text" />
              </span> -->
							<span slot="image" slot-scope="text,record">
								<image-preview1 :images="text" :imageUrl="record.imageUrl" />
							</span>
							<span slot="inventoryNumber" slot-scope="text, record">
								<span :style="formatInventoryNumber(record, true) < record.inventoryWarningValue ? { color: 'red' } : {}">{{
									formatInventoryNumber(record, true)
								}}</span>
								<!-- <span :style="formatInventoryNumber(record,false)<record.inventoryWarningValue?{color:'red'}:{}">({{
                    formatInventoryNumber(record, false)
                  }})</span> -->
							</span>
							<span slot="remainingNumber" slot-scope="text, record">
								<span :style="formatRemainingNumber(record, true) < record.inventoryWarningValue ? { color: 'red' } : {}">{{
									formatRemainingNumber(record, true)
								}}</span>
								<!-- <span :style="formatRemainingNumber(record,false)<record.inventoryWarningValue?{color:'red'}:{}">({{
                    formatRemainingNumber(record, false)
                  }})</span> -->
							</span>
							<span slot="action" slot-scope="text, record">
								<a @click="handleSale(record)" v-if="hasPerm('emsMaterialPool:addList')">采购</a>
							</span>
						</a-table>
					</a-col>

				</a-row>
			</a-form>
		</a-spin>
		<to-pool-form ref="toPoolForm" />
	</a-modal>
</template>

<script>
import { addAllType, doMaterialCalculation, } from '@/api/modular/main/emsorder/emsOrderManage.js'
import { STable } from '@/components'
import toPoolForm from './form.vue'

export default {
	components: {
		STable,
		toPoolForm
	},
	computed: {
		filteredData() {
			return this.materialCalculationResults.filter(value => value.materialType == this.materialType)
		}
	},
	watch: {
		// materialType(newValue) {
		//   /*
		//     {label:'物料', value: '1'},
		//     {label:'线缆实时库存', value: '2'},
		//     {label:'线缆未来库存', value: '3'},
		//    */
		//   if (newValue == '1'|| newValue == '2') {
		//     if (newValue == '1') {
		//       this.filteredData = this.materialCalculationResults.filter(value => value.materialType == this.$businessEnum.MATERIAL_TYPE_ENUM.material.id)
		//     } else {
		//       this.filteredData = this.materialCalculationResults.filter(value => value.materialType == this.$businessEnum.MATERIAL_TYPE_ENUM.cable.id)
		//     }
		//     this.columns = [
		//       {
		//         title: '序号', width:'80px',
		//         dataIndex: 'index',
		//         customRender: (text, record, index) => `${index + 1}`
		//       },
		//       {
		//         title: '料号',
		//         dataIndex: 'materialCode'
		//       },
		//       {
		//         title: '名称',
		//         dataIndex: 'materialName'
		//       },
		//       {
		//         title: '库存',
		//         dataIndex: 'inventoryNumber',
		//         customRender: (text, record, index) => `${record.inventoryNumber} (+${record.numberInProgress})`
		//       },
		//       {
		//         title: '预警值',
		//         dataIndex: 'inventoryWarningValue'
		//       },
		//       {
		//         title: '此次用量',
		//         dataIndex: 'number'
		//       },
		//       {
		//         title: '剩余数量',
		//         dataIndex: 'remainingNumber',
		//         customRender: (text, record, index) => `${record.inventoryNumber-record.number} (${record.inventoryNumber-record.number+record.numberInProgress})`
		//       },
		//       {
		//         title: '操作',
		//         dataIndex: 'action',
		//         width: '150px',
		//         scopedSlots: {customRender: 'action'}
		//       }
		//     ]
		//   } else if (newValue == '3') {
		//     this.filteredData = this.materialCalculationResults.filter(value => value.materialType == this.$businessEnum.MATERIAL_TYPE_ENUM.cable.id)
		//     this.columns = [
		//       {
		//         title: '序号', width:'80px',
		//         dataIndex: 'index',
		//         customRender: (text, record, index) => `${index + 1}`
		//       },
		//       {
		//         title: '料号',
		//         dataIndex: 'materialCode'
		//       },
		//       {
		//         title: '名称',
		//         dataIndex: 'materialName'
		//       },
		//       {
		//         title: '库存',
		//         dataIndex: 'inventoryNumber',
		//         customRender: (text, record, index) => `${record.inventoryNumber + record.number}`
		//       },
		//       {
		//         title: '预警值',
		//         dataIndex: 'inventoryWarningValue'
		//       },
		//       {
		//         title: '此次用量',
		//         dataIndex: 'number'
		//       },
		//       {
		//         title: '剩余数量',
		//         dataIndex: 'remainingNumber'
		//       },
		//       {
		//         title: '操作',
		//         dataIndex: 'action',
		//         width: '150px',
		//         scopedSlots: {customRender: 'action'}
		//       }
		//     ]
		//   } else {
		//
		//   }
		// }
	},
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			labelColBlock: {
				xs: { span: 24 },
				sm: { span: 2 }
			},
			wrapperColBlock: {
				xs: { span: 24 },
				sm: { span: 20 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			columns: [
				{
					title: '序号', width: '80px',
					dataIndex: 'index',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '料号',
					dataIndex: 'materialCode'
				},
				{
					title: '名称',
					dataIndex: 'materialName'
				},
				{
					title: '图片',
					dataIndex: 'image',
					// customRender: (text, record, index) => this.$util.createFcImage(this.$createElement, text)
					scopedSlots: { customRender: 'image' }
				},
				{
					title: '库存',
					dataIndex: 'inventoryNumber',
					scopedSlots: { customRender: 'inventoryNumber' },
					// customRender: (text, record, index) => `${record.inventoryNumber} (${record.inventoryNumber+record.numberInProgress})`
				},
				{
					title: '预警值',
					dataIndex: 'inventoryWarningValue'
				},
				{
					title: '此次用量',
					dataIndex: 'number'
				},
				{
					title: '剩余数量',
					dataIndex: 'remainingNumber',
					scopedSlots: { customRender: 'remainingNumber' },
					// customRender: (text, record, index) => `${record.inventoryNumber-record.number} (${record.inventoryNumber-record.number+record.numberInProgress})`
				},
				{
					title: '操作',
					dataIndex: 'action',
					width: '150px',
					scopedSlots: { customRender: 'action' }
				}
			],
			orderIds: '',
			sysOrgs: [],
			fileList: [],
			orgTree: [],
			materialCalculationResults: [],
			materialType: this.$businessEnum.MATERIAL_TYPE_ENUM.material.id,
		}
	},
	methods: {
		add(record) {
			this.visible = true
			this.confirmLoading = true
			this.orderIds = record
			doMaterialCalculation({ orderIds: this.orderIds }).then((res) => {
				this.confirmLoading = false
				this.materialCalculationResults = res.data
			})
		},
		handleSale(record) {
			// console.log(record)
			this.$refs.toPoolForm.add(record)

		},
		handleSubmit() {
			const { form: { validateFields } } = this
			this.confirmLoading = true

			validateFields((errors, values) => {
				let _values = Object.assign({}, values)
				for (let key in _values) {
					let value = _values[key]
					if (value && typeof value === 'object') {
						_values[key] = value.format('YYYY-MM-DD HH:mm:ss')
					}
				}
				if (!errors) {
					addAllType(_values).then((res) => {
						this.confirmLoading = false
						if (res.success) {
							this.$message.success('新增成功')
							this.handleCancel()
							this.$emit('ok', values)
						} else {
							this.$message.info('新增失败：' + res.message)
						}
					}).finally((res) => {
						this.confirmLoading = false
					})
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.form.resetFields()
			this.visible = false
		},
		formatInventoryNumber(record, isRealtime) {
			if (isRealtime) {
				// 实时
				return record.inventoryNumber
			} else {
				// 未来
				return record.inventoryNumber + record.numberInProgress
			}
		},
		formatRemainingNumber(record, isRealtime) {
			if (isRealtime) {
				// 实时
				return record.inventoryNumber - record.number
			} else {
				// 未来
				return record.inventoryNumber - record.number + record.numberInProgress
			}
		}
	}
}
</script>
